<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>鼠标悬浮模糊效果</title>
<style type="text/css">
  html, body {
            width: 100%;
            height: 100%;
            margin: 0; 
            padding: 0;
        }
  html {
      font-family: sans-serif;
      -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
    }

    .bg{
        background: url('background.png');
        background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            /*z-index: -1; z-index要配合position: absolute;来使用*/
            width: 100%;
        height: 100%;
      position: absolute;
      -webkit-transition:all 1s linear;
      }
 #text{
  position: absolute;
  top:50%;
  left:50%;
  display: flex;
  align-items: center;
  -webkit-transform: translate(-50%,-50%);
  text-align: center;
  width:500px;
  height: 200px;
  z-index: 1;
  /*border:1px solid #000;*/
  background-image: -webkit-linear-gradient(left, #f00, #0ff 25%, #f00 50%, #0ff 75%, #f00);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: textcolor 4s linear infinite;
  opacity:0;filter:alpha(opacity=0); -webkit-transition:all 1s linear;
 }
 @-webkit-keyframes textcolor{
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
 }
 #text span{ font-size: 32px; margin:0 auto;cursor:pointer;}
 #top,#bottom{ position:absolute; background-color: white; width:0;height: 2px; -webkit-transition:all 1s linear;}
 #left,#right{ position:absolute; background-color: white; width: 2px; height: 0; -webkit-transition:all 1s linear;}
 #text:hover~#top,#text:hover~#bottom{  width:500px; -webkit-transform: translateX(-250px);}
 #text:hover~#left,#text:hover~#right{  height:202px;-webkit-transform: translateY(-100px);}
 #text:hover{opacity:1;filter:alpha(opacity=100); }
 #text:hover~.bg{
        -webkit-filter: blur(15px); 
        -moz-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
        filter: url(blur.svg#blur); 
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
 }
     .bg:hover{
            -webkit-filter: blur(15px); 
            -moz-filter: blur(15px);
            -ms-filter: blur(15px);
            filter: blur(15px);
            filter: url(blur.svg#blur); 
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
     }
 }

  </style>

  <script type="text/javascript">
    window.onload = function(){
      document.getElementById("top").style.top = document.getElementById("text").getBoundingClientRect().top + 'px';
      document.getElementById("top").style.left = document.getElementById("text").getBoundingClientRect().left + 250 + 'px';
      document.getElementById("right").style.left = document.getElementById("text").getBoundingClientRect().left + 500 + 'px';
      document.getElementById("right").style.top = document.getElementById("text").getBoundingClientRect().top + 100 + 'px';
      document.getElementById("bottom").style.top = document.getElementById("text").getBoundingClientRect().top + 200 + 'px';
      document.getElementById("bottom").style.left = document.getElementById("text").getBoundingClientRect().left + 250 + 'px';
      document.getElementById("left").style.left = document.getElementById("text").getBoundingClientRect().left + 'px';
      document.getElementById("left").style.top = document.getElementById("text").getBoundingClientRect().top + 100 + 'px';
      document.getElementById("sp").addEventListener("click", function()
    {
        alert('谢谢参与！');
    });
    }
    
  </script>
 </head>
 <body>
  <div id='text'><span id='sp'>欢迎参加百度前端技术学院<br>点击报名</span></div>
  <div class="bg"></div>
  <div id='top'></div><div id='right'></div><div id='bottom'></div><div id='left'></div>
 </body>
</html>